<template>
    <view class="py-outer-content ">
        <view class="py-content">
            <!-- u-search高度为34px -->
            <u-search placeholder="请输入名称" bgColor="white" v-model="queryParams.name" @search="handleQuery"
                @clickIcon="handleQuery" :showAction="false"></u-search>
        </view>


        <view class="py-list-content">
            <!-- 高度多减去5px -->
            <u-list :scrollable="false"
                :height="windowHeight ? 'calc('+ windowHeight + ' - 10rpx - 10rpx - 34px - 5px)' : ''">
                <view v-for="(item, index) in List" :key="index">
                    <u-cell :title="item.name" value="发起流程" isLink clickable @click="handleProcessClick(item)">
                    </u-cell>
                </view>

                <u-divider text="加载更多" v-if="hasLoadmoreButton" @click="handleLoadmoreButtonClick"></u-divider>
                <u-loadmore :status="loadmoreStatus" v-if="hasLoadmore" />
            </u-list>

        </view>


    </view>
</template>
<script>
    import { listDefinition } from "@/api/flowable/definition";
    import { getWindowHeight } from "@/utils/py";
    export default {
        data() {
            return {
                // 流程列表
                List: [],
                // 总条数
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: undefined
                },
                // 窗口高度（去掉导航栏）
                windowHeight: undefined,

                // 加载更多状态
                loadmoreStatus: "nomore",

                // 加载更多是否显示
                hasLoadmore: false,

                // 是否显示加载更多按钮
                hasLoadmoreButton: false
            }
        },
        onLoad: function () {

            // 获取窗口高度
            this.getWindowHeight();

            // 获取列表信息
            this.getList();

        },
        methods: {

            // 获取窗口高度
            getWindowHeight() {
                getWindowHeight().then(response => {
                    this.windowHeight = response;
                })
            },

            // 获取列表信息
            getList() {
                this.$modal.loading("正在获取数据...");
                this.queryParams.pageNum = 1;
                listDefinition(this.queryParams).then(response => {
                    let data = response.data;
                    this.List = data.records;
                    this.total = data.total;
                    let pageSize = this.queryParams.pageSize;

                    if (this.total > pageSize) {
                        this.hasLoadmoreButton = true;
                        this.hasLoadmore = false;
                    } else {
                        this.hasLoadmoreButton = false;
                        this.loadmoreStatus = "nomore";
                        this.hasLoadmore = true;
                    }
                    this.$modal.closeLoading();
                });
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            // 往已有信息中加入信息
            addList() {
                listDefinition(this.queryParams).then(response => {
                    let data = response.data;
                    this.List.push(...data.records);
                    this.total = data.total;

                    let hasAllData = this.hasAllData();
                    // 如果加载全部数据
                    if (hasAllData) {
                        this.loadmoreStatus = "nomore";
                    } else {
                        this.hasLoadmore = false;
                        this.hasLoadmoreButton = true;
                    }
                    this.$modal.closeLoading();
                });
            },

            // 是否获取全部数据
            hasAllData() {
                let pageNum = this.queryParams.pageNum;
                let pageSize = this.queryParams.pageSize;
                let total = this.total;
                return pageNum * pageSize < total ? false : true;
            },

            // 处理加载更多按钮点击操作
            handleLoadmoreButtonClick() {
                this.hasLoadmoreButton = false;
                this.loadmoreStatus = "loading";
                this.hasLoadmore = true;
                let hasAllData = this.hasAllData();
                // 如果已经有全部数据
                if (hasAllData) {
                    this.loadmoreStatus = "nomore";
                    return;
                }

                this.queryParams.pageNum++;
                this.addList();
            },

            // 处理流程点击操作
            handleProcessClick(item) {
                let url = "/pages/flowable/myProcess/send/index?deployId=" + item.deploymentId + "&procDefId=" + item.id + "&formId=" + item.formId;
                this.$tab.navigateTo(url);
            }
        },
    }
</script>